<template>
  <div class="bj">
    <div class="titletop">
      <div class="tleft">网上花店</div>
      <div style="margin-right: 60px">
        <i
          class="el-icon-phone-outline"
          style="font-size: 20px; color: #ff734d"
        ></i
        >&nbsp;18842697892
      </div>
    </div>
    <div class="txdd">
      <h2 style="margin: 0px 0px 20px 0px">确认订单：</h2>
      <el-card>
        <el-card>
          <div class="dizhi" @click="selectAddressList">
            <div class="dizhil">
              <i class="el-icon-location-outline"></i>
            </div>
            <div class="dizhir">
              <p style="margin-bottom: 5px">{{ this.defaultFullAdd }}</p>
              <p>{{ defaultName }}&nbsp;{{ defaultPhone }}</p>
            </div>
            <div class="jt">></div>
          </div>
        </el-card>

        <el-dialog
          title="地址"
          :visible.sync="dialogVisible"
          width="40%"
        >
          <div
            style="cursor: pointer"
            v-for="(item, index) in address"
            :key="index"
          >
            <div class="dialogr" @click="selectAddress(item)">
              <p style="margin-bottom: 5px">
                <i class="el-icon-location-outline" style="color: #ff451b"></i
                >&nbsp;{{ item.fullAdd }}
              </p>
              <p>{{ item.name }}&nbsp;{{ item.phone }}</p>
            </div>

            <el-divider></el-divider>
          </div>
        </el-dialog>


        <h2 style="margin: 20px 0px">核对购物清单</h2>
        <ul v-for="(item, index) in $store.state.select" :key="index">
          <li>
            <div class="qr">
              <div style="width: 50px; height: 50px; margin: 0px 20px 0px 0px">
                <img
                  :src="require(`../../assets/${item.url}`)"
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </div>
              <div>
                <p style="margin-bottom: 10px">
                  {{ item.name }}&nbsp;&nbsp;{{ item.descs }}
                </p>
                <p style="color: #ff734c">￥&nbsp;{{ item.price }}</p>
                <div style="" :class="{ counting: true, disabled }">
                  <div class="reduce" @click="changNum2('-', index)">
                    -
                  </div>
                  <div class="input_box">
                    <div class="wrap" v-if="disabled" />
                    <input
                        type="text"
                        v-model="item.cnt"
                        @blur="changNum2('input', index)"
                        @keyup="amountKeydownFun(index)"
                    />
                  </div>
                  <div class="add" @click="changNum2('+', index)">
                    +
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <h2 style="margin: 20px 0px">送达日期</h2>
        <div>
          <el-date-picker
            v-model="time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </div>
        <h2 style="margin: 20px 0px">贺卡留言</h2>
        <div>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="写上您的祝福语，可附上署名"
            v-model="textarea"
            style="width: 500px"
          >
          </el-input>
        </div>
        <div class="qrdd" @click="submit">提交订单</div>
      </el-card>
    </div>
  </div>
</template>

  
  <script>
// import { getDateNums } from "../../utils/id.js";
export default {
  name: "counting",
  props: {
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      numObj: {
        num: 1,
        type: ""
      },
      tableData: [],
      time: this.$store.state.time, //预计送达时间
      textarea: "", //留言
      addressId: null,
      defaultFullAdd: "", //默认地址
      defaultName: "巨瑞华",
      defaultPhone: "18842697892",
      address: [],
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      userInfo: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},

    };
  },

  methods: {
    amountKeydownFun(index) {
      if (this.$store.state.select[index].cnt.length == 1) {
        this.$store.state.select[index].cnt = this.$store.state.select[index].cnt.toString().replace(/[^1-9]/g, 1);
      } else {
        this.$store.state.select[index].cnt = this.$store.state.select[index].cnt.toString().replace(/\D/g, 1);
      }
    },
    changNum2(type, index) {
      if (this.disabled) return;
      // 点击加号或者减号
      if (type == "+" || type == "-") {
        this.numObj.type = "btn";
        // +
        if (type == "+") {
          this.$store.state.select[index].cnt++;
          // 如果存在最大购买值
          if (this.maxNum) {
            // 存在最大购买值并且最大购买值 >= 库存，则等于库存
            if (
                this.maxNum >= this.stockNum &&
                (this.numObj.num >= this.stockNum ||
                    this.numObj.num > this.maxNum)
            ) {
              this.numObj.num = this.stockNum;
              // 存在最大购买值并且最大购买值 < 库存，则等于最大购买
            } else if (this.numObj.num >= this.maxNum) {
              this.numObj.num = this.maxNum;
            }
            // 不存在最大购买值
          } else {
            if (this.stockNum >= 999 && this.numObj.num >= 999) {
              this.numObj.num = 999;
              // 如果库存没有超过999，最大值为库存
            } else if (this.numObj.num >= this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          }
        }
        // -
        if (type == "-") {
          this.$store.state.select[index].cnt--;
          if (this.$store.state.select[index].cnt < 1) {
            this.$store.state.select[index].cnt = 1;
          }
        }
      }
      // 输入框输入
      if (type == "input") {
        this.numObj.type = "input";
        if (this.$store.state.select[index].cnt.toString().indexOf(".") != -1) {
          let idx = this.$store.state.select[index].cnt.toString().indexOf(".");
          this.$store.state.select[index].cnt = Number(this.$store.state.select[index].cnt.toString().slice(0, idx));
        }
        if (this.maxNum) {
          if (this.maxNum > this.stockNum) {
            if (this.numObj.num >= this.stockNum) {
              this.numObj.num = this.stockNum;
            }
          } else {
            if (this.numObj.num >= this.maxNum) {
              this.numObj.num = this.maxNum;
            }
          }
        } else {
          if (this.stockNum >= 999 && this.numObj.num >= 999) {
            this.numObj.num = 999;
            // 如果库存没有超过999，最大值为库存
          } else if (this.numObj.num >= this.stockNum) {
            this.numObj.num = this.stockNum;
          }
        }
        if (this.minNum) {
          if (this.numObj.num <= this.minNum) {
            this.numObj.num = this.minNum;
          }
        } else {
          if (this.numObj.num <= 1) {
            this.numObj.num = 1;
          }
        }
      }
      this.$emit("changeNumber", this.numObj);
    },
    getDefaultAddress() {
      this.request.get("/address/getDefault?uid=" + this.userInfo.data.id).then(res => {
        let add = res.data.data
        this.addressId = add.id
        this.defaultFullAdd = add.fullAdd
        this.defaultName = add.name
        this.defaultPhone = add.phone
      })
    },
    selectAddressList() {
      this.dialogVisible = true;
      this.request.get("/address/page?uid=" + this.userInfo.data.id).then(res => {
        this.address = res.data.data.records;
      })
    },
    // 选择地址
    selectAddress(item) {
      console.log(item)
      this.addressId = item.id;
      this.defaultFullAdd = item.fullAdd;
      this.defaultName = item.name;
      this.defaultPhone = item.phone;
      this.dialogVisible = false;
    },
    // 提交订单
    submit() {
      if (this.time === "") {
        this.$message({
          type: "warning",
          message: "请选择日期",
        });
      } else {
        let order = {
          addressId: this.addressId,
          sjrname: this.defaultName,
          sjrphone: this.defaultPhone,
          sjraddress: this.defaultFullAdd,
          yjtime: this.time,
          ddmessage: this.textarea,
          uid: this.userInfo.data.id,
          uname: this.userInfo.data.nickname,
        };
        let list = {
          dingdan: order,
          flowerOrders: this.$store.state.select
        }
        this.request.post("/dingdan", list).then((res) => {
          if (res.data.code === "200") {
            this.$message.success("恭喜小主，不日将拿到心爱的鲜花！");
            this.$router.push("/");
          } else {
            this.$message.error("小主！小主！下单失败啦！");
          }
        });
      }
    },
  },
  created() {
    this.getDefaultAddress();
  }


};
</script>

<style lang="less" scoped>
.counting {
  width: 92px;
  height: 24px;
  border: 1px solid #EBEDF0;
  border-radius: 2px;
  user-select: none;
  display: inline-block;
  &.disabled{
    border: 1px solid #F7F8F9;
    .reduce {
      border-right: 1px solid #F7F8F9;
      color: #ADADAE;
    }
    .input_box {
      color: #ADADAE;
      input {
        color: #ADADAE;
      }
    }
    .add {
      border-left: 1px solid #F7F8F9;
      color: #ADADAE;
    }
  }
  div {
    float: left;
    box-sizing: border-box;
    text-align: center;
    line-height: 24px;
    height: 24px;
  }
  .reduce {
    width: 24px;
    border-right: 1px solid #EBEDF0;
    font-size: 14px;
    color: #444;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
  }
  .input_box {
    width: calc(100% - 24px - 24px);
    position: relative;
    .wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.4);
    }
    input {
      border: 0;
      width: 100%;
      height: 100%;
      line-height: 24px;
      font-size: 14px;
      color: #323233;
      text-align: center;
      font-weight: 400;
      /*添加css样式*/
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      &[type="number"] {
        -moz-appearance: textfield;
      }
    }
  }
  .add {
    width: 24px;
    border-left: 1px solid #EBEDF0;
    font-size: 14px;
    color: #444;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
  }
  .add,.reduce {
    position: relative;
    &:hover {
      .tip {
        display: block;
      }
    }
    .tip {
      display: none;
      position: absolute;
      height: auto;
      top: 33px;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      background: #303133;
      color: #FFF;
      padding: 3px 10px;
      font-size: 12px;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 91;
      .triangle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        top: -15px;
        width: 0;
        height: 0;
        border: 8px solid #303133;
        border-right: 8px solid rgba(255, 255, 255, 0);
        border-left: 8px solid rgba(255, 255, 255, 0);
        border-top: 8px solid rgba(255, 255, 255, 0);
      }
    }
  }
}
.titletop {
  height: 100px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 2px 2px 2px white;
}
.tleft {
  font-size: 30px;
  font-family: "Lucida Console", "Courier New", monospace;
  color: #ff734d;
  margin-left: 80px;
}
.txdd {
  margin: 0px 60px;
}
ul li {
  list-style: none;
}
.qr {
  background-color: #f7f9fa;
  padding: 20px;
  display: flex;
}
.qrdd {
  width: 170px;
  height: 60px;
  background-color: #ff451b;
  text-align: center;
  line-height: 60px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;
  margin: 20px 0px;
  position: relative;
  left: 1000px;
  cursor: pointer;
}
.dizhi {
  display: flex;
  cursor: pointer;
}
.dizhil {
  line-height: 50px;
  font-size: 30px;
  color: #ff451b;
  margin-right: 20px;
}
.jt {
  font-size: 30px;
  position: absolute;
  right: 120px;
  color: #b8bbbd;
}
.dialogl {
  line-height: 50px;
  font-size: 30px;
  color: #ff451b;
  margin-right: 20px;
}
.dialogr {
}

</style>